<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css">
    <script src="/assets/libs/layui/layui.js"></script>
    <style>
        .profile-container {
            margin: 50px auto;
            max-width: 600px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
        }

        .profile-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .profile-header h2 {
            margin: 0;
            font-size: 24px;
        }

        .profile-form .layui-form-item {
            margin-bottom: 15px;
        }

        .profile-form .layui-input {
            background-color: #f5f5f5;
            border: 1px solid #e6e6e6;
            pointer-events: none; /* 禁止编辑 */
        }

        .edit-button {
            display: flex;
            justify-content: flex-end;
        }
        .layui-icon.admin-tabs-control {
            display: none !important;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="profile-container">
        <div class="profile-header">
            <h2>个人信息</h2>
        </div>
        <form class="layui-form profile-form">
            <!-- 用户名 -->
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" class="layui-input" th:value="${user.userName}" readonly>
                </div>
            </div>
            <!-- 真实姓名 -->
            <div class="layui-form-item">
                <label class="layui-form-label">真实姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="realName" class="layui-input" th:value="${user.realName}" readonly>
                </div>
            </div>
            <!-- 角色 -->
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <input type="text" name="role" class="layui-input" th:value="${user.role}" readonly>
                </div>
            </div>
            <!-- 邮箱 -->
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" class="layui-input" th:value="${user.email}" readonly>
                </div>
            </div>
            <!-- 手机号 -->
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="tel" class="layui-input" th:value="${user.tel}" readonly>
                </div>
            </div>
<!--            &lt;!&ndash; 编辑按钮 &ndash;&gt;-->
<!--            <div class="layui-form-item edit-button">-->
<!--                <button type="button" class="layui-btn layui-btn-primary" id="editInfo">编辑</button>-->
<!--            </div>-->
        </form>
    </div>
</div>

<script>
    layui.use(['form', 'jquery'], function () {
        var $ = layui.jquery;

        // 点击编辑按钮
        $('#editInfo').click(function () {
            // 启用表单输入框
            $('.profile-form .layui-input').each(function () {
                $(this).removeAttr('readonly').css('background-color', '#fff');
            });

            // 替换按钮为“保存”
            $(this).replaceWith('<button type="button" class="layui-btn" id="saveInfo">保存</button>');

            // 保存操作
            $('#saveInfo').click(function () {
                // 获取表单数据
                var formData = {
                    userName: $('input[name="userName"]').val(),
                    realName: $('input[name="realName"]').val(),
                    role: $('input[name="role"]').val(),
                    email: $('input[name="email"]').val(),
                    tel: $('input[name="tel"]').val()
                };

                // 发送 AJAX 请求保存数据
                $.ajax({
                    url: '/user/userInfo', // 后端接口地址
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    success: function (res) {
                        if (res.code === 0) {
                            layer.msg('信息更新成功！', {icon: 1});
                            // 重新加载页面
                            setTimeout(function () {
                                location.reload();
                            }, 1000);
                        } else {
                            layer.msg('信息更新失败：' + res.msg, {icon: 2});
                        }
                    },
                    error: function () {
                        layer.msg('请求失败，请稍后重试', {icon: 2});
                    }
                });
            });
        });
    });
</script>
</body>
</html>
